<template>
<ul :id="id" class="ztree"></ul>
</template>

<script>
export default {

  props: {
    id: {
      type: String,
      required: true
    },
    handler: {
      type: Function,
      default: () => {}
    },
    nodes: {
      type: Array,
      default() { return []; }
    }
  },

  methods: {
    init() {
      let settings = {
        view: {
          showIcon: false
        },
        data: {
          simpleData: {
            enable: true
          }
        },

        callback: {
          onClick: this.handler
        }
      };

      $.fn.zTree.init($(`#${this.id}`), settings, this.nodes);
    }
  },

  watch: {
    nodes() {
      this.init();
    }
  },

  mounted() {
    this.init();
  }
}
</script>
